<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro"  uri="http://shiro.apache.org/tags" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>系统管理</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
  </head>
  <style>
    .col-md-2{
      padding: 0;
    }
    .modular{
      font-size: 25px;
      /*font-weight: bold;*/
      color: white;
    }
    .name{
      height: 40px;
      line-height: 40px;
      float: left;
      width: 100px;
      font-size: 18px;
    }
    .form-group{
      margin-bottom: 5px;
    }
    .col-md-3{
      padding: 0;
    }
    .col-md-2{
      padding: 0;
    }
    .userMsg{
      width: 60%;
      position: relative;
      left: 19%;
      top: 10px;
      margin-bottom: 0px;
    }
    .layui-form-select dl dd.layui-this{
      background-color: #b4b3f5;
    }
  </style>
  <body>
  <div class="page">
    <!-- Main Navbar-->
    <jsp:include page="header.jsp"></jsp:include>
    <div class="page-content d-flex align-items-stretch">
      <!-- Side Navbar -->
      <jsp:include page="left.jsp"></jsp:include>
      <div class="content-inner" style="background-color: white">
        <!-- Page Header-->
        <header class="page-header">
          <div class="container-fluid">
            <h2 class="no-margin-bottom">系统管理</h2>
          </div>
        </header>
        <div class="content-box" style="background-color: white;height: 95%;">
          <div class="col-md-12" style="border: 1px #ddd solid">
            <div class="col-md-12" style="padding: 0;margin: 10px 0 10px 0;line-height: 40px;">
              <!--<a class="btn green Printing" id="print-click" style="float: right;margin-left: 10px;margin-top: 3px">导出Excel</a>-->
              <!--<button class="btn green Printing" onclick="printout()" style="float: right;margin-top: 3px">打印列表</button>-->
              <shiro:hasPermission name="user:list">
                <a href="/system/userPage"><button type="button"  class="layui-btn layui-btn-normal layui-btn-radius">用户管理</button></a>
              </shiro:hasPermission>
              <shiro:hasPermission name="role:list">
                <a href="/system/rolePage"><button type="button" class="layui-btn layui-btn-radius">角色管理</button></a>
              </shiro:hasPermission>
              <shiro:hasPermission name="resource:list">
                <a href="/system/resourcePage"> <button type="button" class="layui-btn layui-btn-warm layui-btn-radius">资源管理</button></a>
              </shiro:hasPermission>
              <shiro:hasPermission name="user:add">
                <button type="button" onclick="userAddView();" class="layui-btn layui-btn-radius" style="position: relative;left: 65%">添加用户</button>
              </shiro:hasPermission>
            </div>
            <div class="col-md-12" style="min-height: 600px;;margin-bottom: 15px;" >
              <div class="row">
                <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
                <script type="text/html" id="barDemo">
                  <a class="layui-btn layui-btn-xs red"  lay-filter="user" id="modify" lay-event="modify" style="color: white;background-color: #ffb822;">修改信息</a>
                  <a class="layui-btn layui-btn-xs red"  lay-filter="user" id="resource" lay-event="resource" style="color: white;background-color: #20a1ff;">查询权限</a>
                  <a class="layui-btn layui-btn-xs red"  lay-filter="user" id="del" lay-event="del" style="color: white;background-color: red;">删除用户</a>
                </script>
                <script type="text/html" id="switchUser">
                  <!-- 这里的 checked 的状态只是演示 -->
                  <input type="checkbox" name="status" stuval="{{d.status}}"  value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="statusUser" {{ d.status == 1 ? 'checked' : '' }}>
                </script>
              </div>
            </div>
          </div>
        </div>
        <div id="user_resource" style="display:none;">
          <table class="layui-hide" id="LAY_table_resource"  lay-filter="user"></table>
        </div>
        <div class="tab-pane" id="modify_user" style="display: none">
          <form class="layui-form layui-form-pane" lay-filter="example" id="userModifyForm" action="">
            <div class="layui-form-item userMsg" style="display: none">
              <label class="layui-form-label" style="background-color: #b4b3f5;color: white">用户标识</label>
              <div class="layui-input-block">
                <input type="text" id="userId"  name="id" autocomplete="off"  value="" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item userMsg" >
              <label class="layui-form-label" style="background-color: #b4b3f5;color: white">用户名</label>
              <div class="layui-input-block">
                <input type="text" id="username" name="username" autocomplete="off"  class="layui-input">
              </div>
            </div>
            <div class="layui-form-item userMsg" >
            <label class="layui-form-label"style="background-color: #b4b3f5;color: white">用户角色</label>
            <div class="layui-input-block">
              <select name="roleid" id="roleid" lay-filter="juese">
                <option value=""></option>
                <c:forEach items="${roleList}" var="role">
                <option value="${role.id}">${role.name}</option>
                </c:forEach>
              </select>
            </div>
            </div>
            <div class="layui-form-item userMsg" >
              <label class="layui-form-label" style="background-color: #b4b3f5;color: white">联系人</label>
              <div class="layui-input-block">
                <input type="text" id="name" name="name" autocomplete="off"  class="layui-input">
              </div>
            </div>
            <div class="layui-form-item userMsg" >
              <label class="layui-form-label" style="background-color: #b4b3f5;color: white">联系方式</label>
              <div class="layui-input-block">
                <input type="text" id="tel" name="tel" autocomplete="off"  class="layui-input">
              </div>
            </div>
            <div class="layui-form-item layui-form-text userMsg">
              <label class="layui-form-label"style="background-color: #b4b3f5;color: white">详细地址</label>
              <div class="layui-input-block">
                <textarea name="position" id="position" placeholder="" class="layui-textarea"></textarea>
              </div>
            </div>
            <div class="layui-form-item userMsg" style="top: 30px">
              <div class="layui-input-block">
                <button type="button" class="layui-btn" onclick="modifyUser();">立即提交</button>
              </div>
            </div>
          </form>
        </div>
        <div class="tab-pane" id="add_user" style="display: none">
          <form class="layui-form layui-form-pane" lay-filter="example"  action="">
            <div class="layui-form-item userMsg" style="display: none">
              <label class="layui-form-label" style="background-color: #b4b3f5;color: white">用户标识</label>
              <div class="layui-input-block">
                <input type="text" id="add_userId"  name="add_id" autocomplete="off"  value="" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item userMsg" >
              <label class="layui-form-label" style="background-color: #b4b3f5;color: white">用户名</label>
              <div class="layui-input-block">
                <input type="text" id="add_username" name="add_username" autocomplete="off"  class="layui-input">
              </div>
            </div>
            <div class="layui-form-item userMsg" >
              <label class="layui-form-label"style="background-color: #b4b3f5;color: white">用户角色</label>
              <div class="layui-input-block">
                <select name="add_roleid" id="add_roleid" lay-filter="juese">
                  <option value=""></option>
                  <c:forEach items="${roleList}" var="role">
                    <option value="${role.id}">${role.name}</option>
                  </c:forEach>
                </select>
              </div>
            </div>
            <div class="layui-form-item userMsg" >
              <label class="layui-form-label" style="background-color: #b4b3f5;color: white">联系人</label>
              <div class="layui-input-block">
                <input type="text" id="add_name" name="add_name" autocomplete="off"  class="layui-input">
              </div>
            </div>
            <div class="layui-form-item userMsg" >
              <label class="layui-form-label" style="background-color: #b4b3f5;color: white">联系方式</label>
              <div class="layui-input-block">
                <input type="text" id="add_tel" name="add_tel" autocomplete="off"  class="layui-input">
              </div>
            </div>
            <div class="layui-form-item layui-form-text userMsg">
              <label class="layui-form-label"style="background-color: #b4b3f5;color: white">详细地址</label>
              <div class="layui-input-block">
                <textarea name="add_position" id="add_position" placeholder="" class="layui-textarea"></textarea>
              </div>
            </div>
            <div class="layui-form-item userMsg" style="top: 30px">
              <div class="layui-input-block">
                <button type="button" class="layui-btn" onclick="addUser();">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
        </div>
        <!-- Page Footer-->
        <jsp:include page="footer.jsp"></jsp:include>
      </div>
    </div>
  </div>
    <!-- JavaScript files-->
  <script>
    $("#system-menu").addClass('active');
  </script>
    <!-- Main File-->
  <!--   Core JS Files   -->
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/layui/excel.js"></script>
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/FileSaver.js"></script>
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/jszip.js"></script>
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/xlsx.js"></script>
  <script src="${pageContext.request.contextPath}/js/user.js"></script>
  <script>
    layui.use('form', function(){
      var form = layui.form;

    });
  </script>
  </body>
</html>